<template>
  <div class="zx-cardL">
    <div class="cardL-bg">
      <div class="caption">
        <h4>{{title}}</h4>
        <div class="cardL-label" :class="cardType?'':'no-data'">{{cardType}}</div>
      </div>
      <div class="card-detail">
        <div class="type">
          <!--<span v-html="currency+ (currency!=''&&accountType!=''?' | ':'')+ accountType"></span>-->
          <p>{{currency}}</p>
          <p v-if="currency!=='' && accountType!==''" class="border"></p>
          <p>{{accountType}}</p>
        </div>
        <div class="card-No">{{cardLNo}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'zxButton',
  props: {
    cardType: {
      type: String,
      default: '默认卡'
    },
    cardLNo: {
      type: String,
      default: '1234 **** 1234'
    },
    currency: {
      type: String,
      default: '人民币'
    },
    accountType: {
      type: String,
      default: 'I类户'
    },
    title: {
      type: String,
      default: '两地一本通'
    }
  },
  data () {
    return {
      nowCur: 0,
      butTypea: 'primary',
      butTypeB: 'default'
    }
  },
  methods: {
  },
  mounted: function () { }
}
</script>
<style lang="less">
  .zx-cardL {
    width: 100%;
    padding: .16rem .32rem;
    background-color: #fff;
    .cardL-bg {
      width: 6.78rem;
      padding: .26rem .32rem;
      margin: 0 auto;
      background-image: url('../../../static/img/cardBgm.png');
      -webkit-background-size: 100% auto;
      background-size: 100% 100%;
      color: #fff;
      .caption {
        display: flex;
        justify-content:space-between;
        align-items: center;
        font-size: 0.32rem;
        .cardL-label {
          font-size: .2rem;
          padding: .01rem .06rem;
          border: .02rem solid #fff;
          border-radius: .08rem;
          &.no-data {
            border: none;
          }
        }
      }
      .card-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: .2rem;
        .type {
          display: flex;
          align-items: center;
          font-size: .24rem;
          vertical-align: middle;
          .border {
            position: relative;
            top: -.01rem;
            height: .26rem;
            margin: 0 .16rem;
            border-right: .02rem solid #fff;
          }
        }
        .card-No {
          font-size: .32rem;
        }
      }
    }
  }
</style>
